<template>
  <div>
    <transition :enter-active-class="current">
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  computed: {},
  created() {},
  mounted() {},
  methods: {},
  watch: {
    $route: function(to, from) {
      // console.log(to,from)
      var toPath = to.path.split('/').length
      var fromPath = from.path.split('/').length
      // 根据路径长度得变化判断是进入行为还是后退行为
      console.log(toPath, fromPath)
      if (toPath > fromPath) {
        // 进入行为
        this.current = 'animate__animated animate__slideInRight'
      } else if (toPath < fromPath) {
        //
        this.current = 'animate__animated animate__slideInLeft <animate__delay-0 class="5"></animate__delay-0>s'
      } else {
        this.current = 'animate__animated animate__fadeIn animate__delay-0.5s'
      }

      console.log(this.current)
    },
  },
}
</script>

<style scoped lang="scss">
.animate__animated {
  --animate-duration: 0.5s;
}</style>
